<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
        <!--    未使用指令 -->
<!--    <input @input="fn" type="text">-->

    <!--  指令  -->
    <input v-debounce:1000="fn2" type="text">
</div>
</body>
<script type="module">
    // 多阅读  多思考  多总结--------->三多精神
    import jsonp from "./lib/jsonp.js";
	new Vue({
		el:"#root",
        methods:{
			fn(){
				if(this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(function(){
					jsonp({
						url:"https://www.baidu.com/sugrec",
						params:{
							prod:"pc",
							wd:document.querySelector("input").value.trim()
						},
						jsonp:"cb"
					}).then(value=>{
						console.log(value);
					})
                },300)

            },
            fn2(e){
				jsonp({
					url:"https://www.baidu.com/sugrec",
					params:{
						prod:"pc",
						wd:document.querySelector("input").value.trim()
					},
					jsonp:"cb"
				}).then(value=>{
					console.log(value);
				})
            }
        },
        directives:{
			debounce:{
				bind(el,binds){
					const {arg=300} = binds;
					let timer;
					el.addEventListener("input",function(e){
						if(timer) clearTimeout(timer);
						timer = setTimeout(()=>{
							binds.value(e);
                        },arg/1)
                    })
                }
            }
        }
	})
</script>
</html>